<template>
  <div style="height: 100%">
  </div>
</template>

<script>
  import Format from '@/utils/format'
  import EchartsMixins from '../echarts.mixins'

  export default {
    mixins: [EchartsMixins],
    data() {
      return {
        count: 0,
        textColor: '#00e6ff',
        yAxisList: [],
        charts: '',
        xAngleList: [],
        xgList: [],
        ygList: [],
        zgList: [],
        compensateXAngleList: [],
        // 监测点名称
        monitorName: '',
        seriesLists: [],
      }
    },
    computed: {
      options() {
        const that = this
        const Echarts = require('echarts')
        return {
          title: {
            show: false,
            text: this.monitorName + '振动变化曲线图',
            x: 'center',
            align: 'center',
            textStyle: {
              color: this.textColor
            }
          },
          grid: {
            left: 100,
            right: 30,
            bottom: 20,
            // 区域是否包含坐标轴的刻度标签
            containLabel: false
          },
          // 图例组件
          legend: {
            data: ['xg'],
            // data: ['xg', 'yg', 'zg'],
            y: 'top',
            x: 'right',
            padding: [10, 120, 0, 0],
            // 设置为可滚动的图例
            type: 'scroll',
            textStyle: {
              color: this.textColor
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',

              label: {
                backgroundColor: '#505765'
              }
            },
            formatter: (params, ticket, callback) => {
              var contentArr = []
              contentArr.push(Format(new Date(params[0].value[0])))
              for (var i = 0; i < params.length; i++) {
                var data = params[i]
                contentArr.push(data.marker + data.seriesName + '值：' + data.value[1] + 'cm/s²')

              }
              let remark = params[0]?.data?.remark || ''
              remark && contentArr.push(`<p style='font-size:10px;' >${this.sliceStr(remark)}</p>`)
              return contentArr.join('<br/>')
            },
          },
          xAxis: {
            splitLine: {
              show: false
            },
            type: 'time',
            symbol: 'none',
            boundaryGap: false,
            axisLabel: { // 坐标轴标签样式设置
              showMaxLabel: true,
              formatter: function (value, index) { // 坐标轴文字展示样式处理
                return Echarts.format.formatTime('hh:mm:ss', new Date(value))
              },
              textStyle: {
                color: this.textColor
              },
              interval: 5,
              fontSize: 10,
            },
          },
          toolbox: {
            right: '5',
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          yAxis: {
            max: function (value) {
              return Math.ceil(value.max);//向上取整
            },
            name: '加速度(cm/s²)',
            type: 'value',
            splitLine: { //网格线：隐藏
              lineStyle: {
                color: 'rgba(127, 127, 127, 0.5)',
                type: 'dashed', // 线型为虚线
              }
            },
            nameTextStyle: {
              color: this.textColor
            },
            axisLine: {
              lineStyle: {
                color: this.textColor
              }
            },
          },
          series: this.seriesLists
        }
      }
    },
    methods: {
      addData(data) {
        if (this.firstData) {
          this.xgList = []
          this.updateEchart(data, 'ss')
          this.firstData = false
        }
        data.xg.map(x => {
          if(this.xgList.length > 5000)
          this.xgList.shift()
          this.xgList.push(x)
          console.log("地表数据清空**====================")
        })
        this.charts.setOption(this.options)
        console.log("地表数据添加**************************")
      },
      updateEchart(data, monitorName) {
        this.charts.clear();
        this.monitorName = monitorName;
        this.xgList = data.xg
        // 更新series数据
        this.seriesLists = [{
          yAxisIndex: 0,
          name: 'xg',
          type: 'line',
          symbol: 'none',
          smooth: true,
          animation: false,
          data: this.xgList,
        },
        ];
        console.log(this.options)
        this.initEcharts();
        this.charts.setOption(this.options);
        this.charts.resize();
      },
    },
  }
</script>
